<template>
    <div>
        <div class="index-view">
            <h1 class="index-title">项目目录</h1>
            <group>
                <cell v-for="item in taskList" :key="item.name" :is-link="item.isLink" :title="item.name" :link="item.link"></cell>
            </group>
        </div>
    </div>
</template>

<script>
    import {
        Group,
        Cell
    } from 'vux'
    import {
        mapGetters
    } from 'vuex'

    export default {
        name: 'Index',
        components: {
            Group,
            Cell
        },
        data() {
            return {
                taskList: [
                    {name: '首页', isLink: true, link: '/home'},
                    {name: '发现', isLink: true, link: '/discovery'},
                    {name: '消息', isLink: true, link: '/message'},
                    {name: '我的', isLink: true, link: '/account'}
                ]
            }
        },
        computed: {
            ...mapGetters({
                client: 'getterClient'
            })
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .index-view {
        height: 100%;
        .index-title {
            padding-top: 20px;
            text-align: center;
        }
    }
</style>
